<template lang="">
  <el-dialog
    title="设备警报详情信息"
    :visible="visible"
    width="28%"
    top="33vh"
    @close="$emit('update:visible', false)"
    center
  >
    <div>
      <!-- <div class="dialog_content_item">
        <p >设备专属身份ID:</p>
        <span style="margin-left:5px" class="dialog_content_item_bule">{{ useDetail.id || "暂无" }}</span>
      </div> -->
      <div class="dialog_content">
        

      <div class="dialog_content_item">
        <p>雷击：</p>
        <span style="margin-left:5px" 
        :class="[useDetail.lightning == 0 ? 'dialog_content_item_scc' : 'dialog_content_item_err']">{{ useDetail.lightning == 0 ? '正常' : '异常'  }}</span>
      </div>
      <div class="dialog_content_item">
        <p>消防：</p>
        <span style="margin-left:5px" 
        :class="[useDetail.fire == 0 ? 'dialog_content_item_scc' : 'dialog_content_item_err']">{{ useDetail.fire == 0 ? '正常' : '异常'  }}</span>
      </div>
      </div>
      <div class="dialog_content">
      
      <div class="dialog_content_item">
        <p>烟感：</p>
        <span style="margin-left:5px" 
        :class="[useDetail.smoke == 0 ? 'dialog_content_item_scc' : 'dialog_content_item_err']">{{ useDetail.smoke == 0 ? '正常' : '异常'  }}</span>
      </div>
      <div class="dialog_content_item">
        <p>浸水：</p>
        <span style="margin-left:5px" 
        :class="[useDetail.water == 0 ? 'dialog_content_item_scc' : 'dialog_content_item_err']">{{ useDetail.water == 0 ? '正常' : '异常'  }}</span>
      </div>
      </div>
      <div class="dialog_content dialog_content_end">
      
      <div class="dialog_content_item">
        <p>急停：</p>
        <span style="margin-left:5px" 
        :class="[useDetail.urgencyStop == 0 ? 'dialog_content_item_scc' : 'dialog_content_item_err']">{{ useDetail.urgencyStop == 0 ? '正常' : '异常'  }}</span>
      </div>
      <div class="dialog_content_item dialog_content_item_men">
        <p>维修门：</p>
        <span style="margin-left:5px" 
        :class="[useDetail.maintainDoor == 0 ? 'dialog_content_item_door' : 'dialog_content_item_err']">{{ useDetail.maintainDoor == 0 ? '关闭' : '打开'  }}</span>
      </div>
      </div>

     
      
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      checkboxGroup: "",
    };
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    useDetail: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    // this.useDetail.engaged.forEach((item) => {
    let spanItem = document.getElementsByTagName(
      "el-radio-group>el-radio-group"
    );
    console.log(spanItem);
    // });
  },
  watch: {
    visible: {
      handler: function (status) {
        if (!status) {
          this.checkboxGroup = "";
        }
      },
      immediate: true, //关键
      deep: true,
    },
  },
  methods: {
  },
};
</script>

<style lang="scss">
.dialog_content {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

.dialog_content_item {
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-content: center;
}

.dialog_content_item>p {
  color: #000;
  font-size: 20px;
}

.dialog_content_item_err {
  color: #f40a0a;
  font-size: 20px;
}

.dialog_content_item_scc {
  color: #27ca38;
  font-size: 20px;
}

.dialog_content_item_door {
  color: #93939d;
  font-size: 20px;
}

.dialog_content_item_bule {
  color: #5083d5;
  font-size: 20px;
}

.dialog_content_end {
  padding-left: 5px;
}

.dialog_content_item_men {
  position: relative;
  left: 12px;
}
</style>
